<template>
  <div>
    <v-row>
      <v-col>
        <v-card
            height="875"
        >
          <v-card-text>
              <v-row dense>
                <v-col cols="3"><h3 style="display: inline">编辑PICT脚本：</h3></v-col>
                <v-col cols="2"><v-btn dense color="blue" small @click="showDemo">双击查看示例</v-btn></v-col>
                <v-dialog
                    v-model="dialogDemo"
                    max-width="700px"
                >
                  <div id="showID">
                    <textarea v-model="htmlContent" style="display:none;"></textarea>
                  </div>
                </v-dialog>
              </v-row>
              <v-row dense>
                <v-col cols="6"></v-col>
              </v-row>
              <v-row dense>
                <v-col>
                  <div id="sceneID">
                      <textarea v-model="content" style="display:none;"></textarea>
                  </div>
                </v-col>
              </v-row>
              <v-row dense>
                <v-col cols="5"></v-col>
                <v-col cols="3" dense>
                  <v-text-field
                  v-model="groupId"
                  label="/o: 阶数|组合对数"
                  dense
                  small
                  ></v-text-field></v-col>
                <v-col cols="2"><v-btn dense color="primary" small>生成测试场景</v-btn></v-col>
                <v-col cols="2" center><v-btn dense color="green" small>保存</v-btn></v-col>
              </v-row>
          </v-card-text>
        </v-card>
      </v-col>
      <v-col>
        <v-card
            height="875"
        >
          <v-card-text>
            <v-container fluid>
              <v-row dense>
                <v-col cols="10"><div style="height: 40px"><h4>以下是一种标准输入方式：单条依次插入；熟悉后也可在左侧编辑器内直接编辑。</h4></div></v-col>
                <v-col cols="2">
                  <v-btn
                    icon
                    @click="showEdit = !showEdit"
                  >
                    <v-icon>{{ showEdit ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
                  </v-btn>
                </v-col>
              </v-row>
              <v-expand-transition>
                <div v-show="showEdit">
                  <v-divider></v-divider>
                  <v-row dense>
                    <v-col cols="10"><h4>Part1: 定义参数</h4></v-col>
                  </v-row>

                  <v-row dense>
                    <v-col cols="2">
                      <div style="margin-top:10px;margin-left:20px">
                        <btn
                        icon
                        @click="insertSplit(1)"
                        ><v-icon small>mdi-arrow-up-down</v-icon></btn>
                        <btn
                        icon
                        @click="clearParam(1)"
                        style="margin-left:20px"
                        ><v-icon small>mdi-delete-outline</v-icon></btn>
                      </div>
                    </v-col>
                    <v-col cols="2">
                        <v-text-field
                          dense
                          v-model="parName"
                          label="参数名称"
                        ></v-text-field>
                    </v-col>
                    <v-col cols="6">
                      <v-combobox
                        dense
                        v-model="parValues"
                        hide-selected
                        label="添加参数取值：添加顺序代表取值的优先级和权重"
                        multiple
                        persistent-hint
                        small-chips
                      >
                        <template v-slot:no-data>
                          <v-list-item>
                            <v-list-item-content>
                              <v-list-item-title>
                                按下 <kbd>enter</kbd> 添加："<strong>{{ search }}</strong>".
                              </v-list-item-title>
                            </v-list-item-content>
                          </v-list-item>
                        </template>
                      </v-combobox>
                    </v-col>
                    <v-col cols="1">
                        <v-btn
                          color="#b3ffe8"
                          @click="addParam"
                          small
                        >插入</v-btn>
                    </v-col>
                    <v-col cols="1">
                      <v-checkbox
                        dense
                        v-model="posFlag"
                      ></v-checkbox>
                    </v-col>
                  </v-row>

                  <v-row dense>
                    <v-col cols="10"><h4>Part2: 定义子模型（可选）</h4></v-col>
                  </v-row>

                  <v-row dense>
                    <v-col cols="2">
                      <div style="margin-top:10px;margin-left:20px">
                        <btn
                        icon
                        @click="insertSplit(2)"
                        ><v-icon small>mdi-arrow-up-down</v-icon></btn>
                        <btn
                        icon
                        @click="clearParam(2)"
                        style="margin-left:20px"
                        ><v-icon small>mdi-delete-outline</v-icon></btn>
                      </div>
                    </v-col>
                    <v-col cols="2">
                        <v-text-field
                          dense
                          v-model="modelNum"
                          label="设置阶数"
                        ></v-text-field>
                    </v-col>
                    <v-col cols="6">
                      <v-combobox
                        dense
                        v-model="modelValues"
                        :items="paramsList"
                        :search-input.sync="search"
                        hide-selected
                        label="选择参数名称，组成子模型。多组参数不得耦合,子模型个数不大于阶数！"
                        multiple
                        persistent-hint
                        small-chips
                      >
                        <template v-slot:no-data>
                          <v-list-item>
                            <v-list-item-content>
                              <v-list-item-title>
                                按下 <kbd>enter</kbd> 添加："<strong>{{ search }}</strong>".
                              </v-list-item-title>
                            </v-list-item-content>
                          </v-list-item>
                        </template>
                      </v-combobox>
                    </v-col>
                    <v-col cols="1">
                        <v-btn
                          color="#b3ffe8"
                          @click="addModel"
                          small
                        >插入</v-btn>
                    </v-col>
                    <v-col cols="1">
                      <v-checkbox
                        dense
                        v-model="posFlag2"
                      ></v-checkbox>
                    </v-col>
                  </v-row>

                  <v-row dense>
                    <v-col cols="10"><h4>Part3: 定义约束条件（可选）</h4></v-col>
                  </v-row>

                  <v-row dense>
                    <v-col cols="2">
                      <div style="margin-top:10px;margin-left:20px">
                        <btn
                        icon
                        @click="insertSplit(3)"
                        ><v-icon small>mdi-arrow-up-down</v-icon></btn>
                        <btn
                        icon
                        @click="clearParam(3)"
                        style="margin-left:20px"
                        ><v-icon small>mdi-delete-outline</v-icon></btn>
                      </div>
                    </v-col>
                    <v-col cols="2">
                      <v-combobox
                        dense
                        v-model="ifValue"
                        :items="paramsList"
                        label="IF 参数选择"
                        @change="ifChange"
                      >
                      </v-combobox>
                    </v-col>
                    <v-col cols="2">
                      <v-combobox
                        dense
                        v-model="ifFlag"
                        :items="conditionList"
                        label="选择条件"
                        @change="ifFlagChange"
                      >
                      </v-combobox>
                    </v-col>
                    <v-col cols="4">
                      <v-combobox
                        dense
                        v-model="ifSelect"
                        :items="ifCombox"
                        :multiple="multiFlag1"
                        hide-selected
                        label="添加参数取值范围"
                        persistent-hint
                        small-chips
                      >
                        <template v-slot:no-data>
                          <v-list-item>
                            <v-list-item-content>
                              <v-list-item-title>
                                按下 <kbd>enter</kbd> 添加："<strong>{{ search }}</strong>".
                              </v-list-item-title>
                            </v-list-item-content>
                          </v-list-item>
                        </template>
                      </v-combobox>
                    </v-col>
                  </v-row>

                  <v-row dense>
                    <v-col cols="2">
                    </v-col>
                    <v-col cols="2">
                      <v-combobox
                        dense
                        v-model="thenValue"
                        :items="paramsList"
                        label="THEN 参数选择"
                        @change="thenChange"
                      >
                      </v-combobox>
                    </v-col>
                    <v-col cols="2">
                      <v-combobox
                        dense
                        v-model="thenFlag"
                        :items="conditionList"
                        label="选择条件"
                        @change="thenFlagChange"
                      >
                      </v-combobox>
                    </v-col>
                    <v-col cols="4">
                      <v-combobox
                        dense
                        v-model="thenSelect"
                        :items="thenCombox"
                        hide-selected
                        label="添加参数取值范围"
                        :multiple="multiFlag2"
                        persistent-hint
                        small-chips
                      >
                        <template v-slot:no-data>
                          <v-list-item>
                            <v-list-item-content>
                              <v-list-item-title>
                                按下 <kbd>tab/enter</kbd> 添加："<strong>{{ search }}</strong>".
                              </v-list-item-title>
                            </v-list-item-content>
                          </v-list-item>
                        </template>
                      </v-combobox>
                    </v-col>
                    <v-col cols="1">
                        <v-btn
                          small
                          color="#b3ffe8"
                          @click="addCondition"
                        >插入</v-btn>
                    </v-col>
                    <v-col cols="1">
                      <v-checkbox
                        dense
                        v-model="posFlag3"
                      ></v-checkbox>
                    </v-col>
                  </v-row>
                </div>
              </v-expand-transition>
              <v-divider></v-divider>
              <div style="margin-top:30px">
              <v-row dense height="30px"><h3 style="margin-bottom: 10px">生成的测试场景结果预览：</h3></v-row>
              <v-row dense>
                <v-data-table
                  :headers="headers"
                  :items="desserts"
                  :items-per-page="5"
                  height="100%"
                ></v-data-table>
              </v-row>
              </div>
            </v-container>
            
          </v-card-text> 
        </v-card>
      </v-col>
    </v-row>
  </div>
</template>

<script>
import {defineComponent} from '@vue/composition-api'

export default defineComponent({
  name: 'design',
  setup() {

  },
  data(){
    return {
      search: null,
      filename: this.$route.params.name,
      showEdit: false,
      dialogDemo: false,
      showDemoInde: 0,
      content: '# 创建PICT数据生成脚本：（1）参数定义；（2）子模型定义；（3）约束条件定义。\n',
      htmlContent: `### PICT脚本的编辑基本规则：
    Part1:参数定义部分: [ParamName: Value1, Value2, Value3]
    Part2:子模型定义部分: { < paramname1 >，< paramname2 >，< paramname3 >，…} @ <阶数>
    Part3:约束:(1)条件约束： ：=，>，>，>，<，>, <>, LIKE;(2) 非条件约束： in,and,or
    - 以下是一个简单示例：
        PLATFORM:  x86, ia64, amd64
        CPUS:      Single, Dual, Quad
        RAM:       128MB, 1GB, 4GB, 64GB
        APP:       SQLServer, Exchange, Office
        {PLATFORM, CPUS, RAM} @ 3
        IF [PLATFORM] = 'ia64' THEN [CPUS] = 'Dual';
        IF [PLATFORM] in {'x86','amd64'} THEN [RAM] >= '64GB';
 ### PICT工具的运行参数
    成对独立组合测试

    用法：pict型号[选项]

    选项：
    /o:N    -组合顺序（默认值：2）
    /d:C    -值的分隔符（默认值：，）
    /a:C    -别名分隔符（默认值：|）
    /n:C    -负值前缀（默认值：~）
    /e:文件  -包含种子行的文件
    /r[：N]  -随机生成，N-种子
    /c       -区分大小写的模型评估
    /s       -Show模型统计
      `,
      instance1: null,
      instance2: null,
      // 结果展示的表格变量
      headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'start',
          sortable: false,
          value: 'name',
        },
        { text: 'Calories', value: 'calories' },
        { text: 'Fat (g)', value: 'fat' },
        { text: 'Carbs (g)', value: 'carbs' },
        { text: 'Protein (g)', value: 'protein' },
        { text: 'Iron (%)', value: 'iron' },
      ],
      desserts: [
        {
          name: 'Frozen Yogurt',
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          iron: '1%',
        }
      ],

      // 右侧的数据
      paramsList: [],    // 参数名称
      paramsDict: {},    // 参数名称和取值
      // 参数定义的变量
      posFlag: false,
      parName: '',
      parValues: [],
      // 子模型的变量
      posFlag2: false,
      modelNum: null,
      modelValues: [],
      // 约束条件的变量
      posFlag3: false,
      ifValue: '',
      thenValue: '',
      ifFlag: '',
      thenFlag: '',
      ifSelect: [],
      thenSelect: [],
      ifCombox: [],
      thenCombox: [],
      multiFlag1: false,
      multiFlag2: false,
      conditionList: ['=', '>', '<', '>=', '<=', '<>', 'LIKE', 'in', 'or', 'not', 'and'],
    }
  },
  mounted(){
      this.initMarkdown()
  },
  methods: {
    initMarkdown: function () {
      this.instance1 = window.editormd("sceneID", {
        height: '650px',
        width: '100%',
        path: 'editormd/lib/',
        markdown: this.content,
        watch: false,
        toolbar: true,
        toolbarIcons: function () {  //自定义工具栏，后面有详细介绍
          return [
            "undo", "redo", "|", "h1", "code", "fullscreen", "clear",
          ];
        }
      });
      this.readContent()
    },
    readContent: function(){
      let post_data = {'filename': this.filename}
      this.$api.scene.readScript(post_data).then(res=>{
        console.log(res)
        this.instance1.setMarkdown(res.data)
      })
    },
    showDemo: function(){
      this.dialogDemo=true
      this.showDemoInde += 1
      if(this.showDemoInde<3){
        
        window.editormd.markdownToHTML("showID", {
            markdown: this.htmlContent,
            markdownSourceCode: true,
            tocDropdown: true,
            htmlDecode      : "style,script,iframe",  // you can filter tags decode
        }); 
      }
    },
    clearParam: function(num){
      if(num===1){
        this.parName = ''
        this.parValues = []
      }
      if(num===2){
        this.modelNum=null
        this.modelValues=[]
      }
      if(num===3){
        this.ifValue=''
        this.thenValue=''
        this.ifFlag=''
        this.thenFlag=''
        this.ifSelect=[]
        this.thenSelect= []
        this.ifCombox=[]
        this.thenCombox=[]
      }
    },
    addParam: function(){
      let cur_name = this.parName
      let cur_values = this.parValues
      this.paramsList.push(cur_name)
      this.paramsDict[cur_name] = cur_values
      console.log(this.paramsDict)
      let cur_row = cur_name + ': ' + cur_values.join(',') + '\n'
      console.log(cur_row)
      if(!this.posFlag){
        this.instance1.gotoLine('last')
      }
      this.instance1.insertValue(cur_row)
    },
    addModel: function(){
      let childNum = this.modelNum
      let childSelect = this.modelValues
      let childModel = '{' + childSelect.join(',')  +'} @ ' + childNum.toString() + '\n'
      console.log(childModel)
      if(!this.posFlag2){
        this.instance1.gotoLine('last')
      }
      this.instance1.insertValue(childModel)
    },
    addCondition: function (){
      let cur_if_flag = this.ifFlag
      let condition_row1 = ''
      console.log(this.ifSelect)
      if(cur_if_flag==='in'){
        let col_values1 = this.ifSelect.map((val)=>{
          return "'" + val + "'"
        })
        condition_row1 = 'IF [' + this.ifValue + '] ' + cur_if_flag + ' {' + col_values1.join(',') + '} '
      }else {
        condition_row1 = 'IF [' + this.ifValue + '] ' + cur_if_flag + " '" + this.ifSelect + "' "
      }
      let cur_then_flag = this.thenFlag
      let condition_row2 = ''
      if(cur_then_flag==='in'){
        let col_values2 = this.thenSelect.map((val)=>{
          return "'" + val + "'"
        })
        condition_row2 = 'THEN [' + this.thenValue + '] ' + cur_then_flag + ' {' + col_values2.join(',') + '};\n'
      }else {
        condition_row2 = 'THEN [' + this.thenValue + '] ' + cur_then_flag + " '" + this.thenSelect + "';\n"
      }
      const res_condition = condition_row1 + condition_row2
      console.log(res_condition)
      if(!this.posFlag3){
        this.instance1.gotoLine('last')
      }
      this.instance1.insertValue(res_condition)
    },
    ifChange: function (){
      let cur_if_value = this.ifValue
      this.ifCombox  = this.paramsDict[cur_if_value]
    },
    thenChange: function (){
      let cur_then_value = this.thenValue
      this.thenCombox = this.paramsDict[cur_then_value]
    },
    ifFlagChange: function (){
      let tf = this.ifFlag
      if(tf==='in'){
        this.multiFlag1 = true
      }else {
        this.multiFlag1 = false
      }
    },
    thenFlagChange: function (){
      let tf = this.thenFlag
      if(tf==='in'){
        this.multiFlag2 = true
      }else {
        this.multiFlag2 = false
      }
    },
    insertSplit: function(num){
      if(num===1){
        let split_row1 = '\n# =========定义参数==============\n'
        this.instance1.gotoLine('last')
        this.instance1.insertValue(split_row1)
      }
      if(num===2){
        let split_row2 = '\n# =========定义子模型============\n'
        this.instance1.gotoLine('last')
        this.instance1.insertValue(split_row2)
      }
      if(num===3){
        let split_row3 = '\n# =========定义约束条件===========\n'
        this.instance1.gotoLine('last')
        this.instance1.insertValue(split_row3)
      }
    },

  }
})
</script>

<style scoped>

</style>